import moment from "moment";
export default {
  grid: {//设置图表四周留白间距
    left: '8%',
    right: '3%',
    bottom: '5%',
  },
  tooltip: {
    // enterable: true,
    trigger: "item",
    show: true,
    // alwaysShowContent: true,
    hideDelay: 100,
    backgroundColor: "rgba(255,255,255,1)", // 背景颜色（此时为默认色）
    borderRadius: 5, // 边框圆角
    textStyle: {
      color: "#000",
    },
    formatter: function (params) {
      const item = params.data.value;
      let ap
      if (item[2] > 0) {
        ap = `<span style="color:#409eff;">充放电功率：${item[2]}</span>`
      } else if (item[2] == 0) {
        ap = `<span style="color:#909399;">充放电功率：${item[2]}</span>`
      } else {
        ap = `<span style="color:#67c23a;">充放电功率：${item[2]}</span>`
      }
      return (
        `开始时间：${item[0]}<br/>结束时间：${item[1]}<br/>${ap}`

      );
    },
  },
  xAxis: {
    type: "time",
    splitNumber: 24,
    position: "bottom",
    min: new Date(moment().startOf('day')).getTime(),
    max: new Date(moment().endOf('day')).getTime(),
    axisLabel: {
      color: "#333",
      formatter: (value) => {
        const hour = moment(value).format("HH")
        return hour
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: "dashed",
        color: "rgba(255, 255, 255,0.1)"
      }
    },
    axisLine: {
      show: true
    },
    axisTick: {
      show: true
    }
  },
  yAxis: {
    name: "(KW)",
    splitLine: {
      lineStyle: {
        color: "rgba(255, 255, 255,0.1)"
      }
    }
  },
  series: [
    {
      type: 'custom',
      renderItem: function (params, api) {

        var yValue = api.value(2);
        var start = api.coord([api.value(0), yValue]);
        var end = api.coord([api.value(1), yValue]);
        /*var size = api.size([api.value(1) - api.value(0), yValue]); */
        var style = api.style();
        return {
          type: 'rect',
          shape: {
            x: start[0],
            y: start[1],
            width: end[0] - start[0],
            height: 5
          },
          style: style
        };
      },
      label: {
        show: true,
        position: 'top'
      },
      //dimensions: ['from', 'to', 'profit'],
      encode: {
        x: [0, 1],
        y: 2,
        tooltip: [0, 1, 2],
        itemName: 3
      },
      itemStyle: {
        normal: {
          color: function (params) {
            if (params.value[2] > 0) {
              return "#409eff";
            } else if (params.value[2] == 0) {
              return "#909399"
            } else {
              return "#67c23a";
            }
          },
        },
      },
      data: []
    }
  ]
};